<!--
 * @Author: 九哥
 * @Date:
 * @LastEditTime: 2021-08-25 06:43:06
 * @LastEditors: Please set LastEditors
 * @Description: 表单设计器完整例子
 * @FilePath:
-->
<template>
  <a-card :bordered="false" class="card-area">
    <a-spin size="large" :spinning="loading">
      <k-form-build
        :value="jsonData"
        :dynamicData="dynamicData"
        :defaultValue="defaultValue"
        ref="kfb"
        @change="handleChange"
        @logEvent="logEvent"
      >
        <template slot="slotTest">
          <!-- 自定义(插槽) -->
          <p>外层 - 插槽</p>
        </template>
        <template slot="slotTest1">
          <!-- 自定义(插槽) -->
          <p>栅格布局 - 插槽1</p>
        </template>
        <template slot="slotTes2">
          <!-- 自定义(插槽) -->
          <p>tab布局 - 插槽2</p>
        </template>
      </k-form-build>
      <SearchPanel
        ref="searchPanel"
        searchDialogWidth="30%"
        @handleQuery="searchQuery"
        :defaultFilter="defaultFilter"
        currentComponentName="DemoSearch"
      />
      <OperatePanel2 :pageType="pageType" :pageId="pageId" @handleBusiness="handleBusiness" />
    </a-spin>
  </a-card>
</template>
<script>
import { ctos3CommonApi, getFormConfig } from '../../../packages/api/manage'
import { deepCopy, packageRpcParam, useCodeEvent } from '../../../packages/utils/util'
import { notification } from 'ant-design-vue'
export default {
  name: 'Demo',
  components: {
  },
  data() {
    return {
      // 配置到数据库的pageId，根据业务需要进行修改
      pageId: 'TEST',
      // 后台接口，根据业务需要进行修改
      serviceName: '',
      // 弹窗标题
      title: '',
      loading: false,
      url: {
        // 以下方法，根据业务需要进行修改
        detail: 'getUnique',
        insert: 'save',
        edit: 'updateById',
      },
      pageType: 'form',
      selectedRowslist: [],
      defaultFilter: {},
      defaultValue: {},
      dynamicData: {
        treeData: [
          {
            value: '1',
            label: '树形选项1',
            children: [
              { value: '11', label: '树形选项1-1' },
              { value: '12', label: '树形选项1-2' },
            ],
          },
          {
            value: '2',
            label: '树形选项2',
            children: [
              { value: '21', label: '树形选项2-1' },
              { value: '22', label: '树形选项2-2' },
            ],
          },
        ],
        slots: ['slotTest', 'slotTest1', 'slotTes2'],
        funName: this.printHelloWorld,
        commonFunc: this.commonFunc,
        dy_select: [
          { label: '123', value: 123 },
          { label: '1234', value: 1234 },
        ],
        treeData2: [
          {
            title: '0-0',
            key: '0-0',
            children: [
              {
                title: '0-0-0',
                key: '0-0-0',
                children: [
                  { title: '0-0-0-0', key: '0-0-0-0' },
                  { title: '0-0-0-1', key: '0-0-0-1' },
                  { title: '0-0-0-2', key: '0-0-0-2' },
                ],
              },
              {
                title: '0-0-1',
                key: '0-0-1',
                children: [
                  { title: '0-0-1-0', key: '0-0-1-0' },
                  { title: '0-0-1-1', key: '0-0-1-1' },
                  { title: '0-0-1-2', key: '0-0-1-2' },
                ],
              },
              {
                title: '0-0-2',
                key: '0-0-2',
              },
            ],
          },
          {
            title: '0-1',
            key: '0-1',
            children: [
              { title: '0-1-0-0', key: '0-1-0-0' },
              { title: '0-1-0-1', key: '0-1-0-1' },
              { title: '0-1-0-2', key: '0-1-0-2' },
            ],
          },
          {
            title: '0-2',
            key: '0-2',
          },
        ],
        cascaderData: [
          {
            value: '1',
            label: '级联1',
            children: [
              { value: '11', label: '级联1-1' },
              { value: '12', label: '级联1-2' },
            ],
          },
          {
            value: '2',
            label: '级联2',
            children: [
              { value: '22', label: '级联2-2' },
              { value: '222', label: '级联2-2' },
              { value: '232', label: '级联2-3' },
            ],
          },
        ],
      },
      jsonData: {},
    }
  },
  created() {
    // this.init();
  },
  async mounted() {
    // 加载数据的方法，必须在 mounted在所有 方法之前调用
    this.visible = true
    const response = await getFormConfig(this.pageId)
    if (response && response.responseData.statusCode === 0) {
      const result = response.responseData.resultData
      this.jsonData = JSON.parse(result.configJson)
      useCodeEvent(this.jsonData.config, 'callInMounted', this)(this)
    } else {
      this.$message.error('加载动态表单失败!')
    }
  },
  methods: {
    // 该方法由父组件发起调用打开弹窗
    // init(search) {
    //   this.visible = true;
    //   this.loading = true;
    //   getFormConfig(this.pageId)
    //     .then((response) => {
    //       this.loading = false;
    //       if (response.responseData.statusCode === 0) {
    //         let result = response.responseData.resultData;
    //         this.jsonData = JSON.parse(result.configJson);
    //         this.$refs.kfb.reset();
    //         if (search) {
    //           this.getData(search);
    //         }
    //       } else {
    //         this.$message.error("加载动态表单失败!");
    //       }
    //     })
    //     .catch(() => {
    //       this.loading = false;
    //     });
    // },
    initTestEvent() {
      console.log('通过配置callInMounted，方法initTestEvent被触发')
    },
    getData(queryParam) {
      var filter = {}
      // 时间
      if (queryParam.dutyTime.length > 0) {
        filter.dutyTime_andGreatEq = queryParam.dutyTime[0]
        filter.dutyTime_andLessEq = queryParam.dutyTime[1]
      }
      // 工种
      if (queryParam.classId !== undefined && queryParam.classId.length > 0) {
        filter.classId_andEq = queryParam.classId
      }
      // 班次
      if (queryParam.shiftId !== undefined && queryParam.shiftId.length > 0) {
        filter.shiftId_andEq = queryParam.shiftId
      }
      // 是否匹配
      if (queryParam.checkYn !== undefined && queryParam.checkYn.length > 0) {
        filter.checkYn_andEq = queryParam.checkYn
      }
      const rpcParams = packageRpcParam(filter)
      rpcParams.push('ActEfficiencyMsg')
      ctos3CommonApi('codeService', 'get', rpcParams).then(response => {
        if (response.responseData.statusCode === 0) {
          const result = response.responseData.resultData.list
          this.$refs.kfb.setData({ listData: result })
        }
      })
    },
    // 操作栏方法配置
    handleBusiness(operation) {
      // 通过配置两种方式，useCodeEvent适合热发布，第二种适合写死
      useCodeEvent(this.jsonData.config, 'handleBusiness', this)(operation, this)
      // switch (operation) {
      //   case "save":
      //     this.save();
      //     break;
      //   case "goto":
      //     this.goto();
      //     break;
      // }
    },
    // 放大镜搜索配置
    searchQuery(res) {
      this.defaultFilter = deepCopy(res)
      this.getData(res)
    },
    /**
     * @description: 表单事件捕获
     * @return {*}
     * @param {*} value 值
     * @param {*} key 标识符
     */
    handleChange(value, key) {
      useCodeEvent(this.jsonData.config, 'handleChange', this)(value, key, this)
      // console.log(value + key)
    },
    // kform batch value change event
    logEvent(value, key) {
      // useCodeEvent(this.jsonData.config, 'logEvent', this)(this)
      if (value.event === 'onSelectionChanged') {
        this.selectedRowslist = value.selectedRowsData
      } else if (value.event === 'onRowDblClick') {
      }
      // console.log(value + key)
    },
    save() {
      this.$refs.kfb.getData().then(res => {
        const rpcParams = []
        rpcParams.push(res)
        this.loading = true
        ctos3CommonApi(this.serviceName, this.url.insert, rpcParams)
          .then(response => {
            if (response.responseData.statusCode === 0) {
              notification.success({
                message: '系统提示',
                description: '操作成功!',
                duration: 5,
              })
            }
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    goto() {
      this.$router.push({
        path: '/system/SystemRuleGroup',
        query: { id: 1 },
      })
    },
    printHelloWorld() {
      alert('hello world invoke')
    },
    commonFunc(operation) {
      useCodeEvent(this.jsonData.config, 'dynamicFunc', this)(operation, this)
      // if (operation === 'test') {
      //   alert('test invoke')
      // }
    },
  },
}
</script>
